<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
  <body>
    <!-- 
        生命周期
            1.又名：生命周期回调函数、生命周期函数、生命周期钩子
            2.是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数
            3.生命周期函数的名字不可更改，但函数具体内容可以自己写
            4.生命周期函数中的 this 指向的是 vm， 或 组件实例对象
    -->
    <div id="root">
      <!-- 重名可以用简写形式 :style="{opacity}"-->
      <h2 :style="{opacity:opacity}">欢迎学习Vue</h2>
      <!-- 2.直接在插值语法中调用。！！！有大问题，如果这个值一直变，vue会一直重新解析，函数已知被调用，如果是耗内存的就完了 -->
      <!-- {{ change() }} -->
    </div>
    <script type="text/javascript">
      Vue.config.productionTip = false;
      const vm = new Vue({
        data: {
          opacity: 1,
        },
        // Vue完成模板解析并把真实DOM元素放入页面后（挂载完毕），调用mounted
        mounted() {
              console.log("mounted");
              setInterval(() => {
                this.opacity -= 0.1;
                if (this.opacity <= 0) this.opacity = 1;
              }, 100);
        },
        // 2.直接在插值语法中调用。！！！有大问题，如果这个值一直变，vue会一直重新解析，函数已知被调用，如果是耗内存的就完了
        // methods: {
        //   change() {
        //     console.log("调我");
        //     setInterval(() => {
        //       this.opacity -= 0.1;
        //       if (this.opacity <= 0) this.opacity = 1;
        //     }, 100);
        //   },
        // },
      });
      vm.$mount("#root");

      //   1.通过外部定时器实现（不推荐）
      //   setInterval(() => {
      //     vm.opacity -= 0.1;
      //     if (vm.opacity <= 0) vm.opacity = 1;
      //   }, 100);
    </script>
  </body>
</html>
